<template>
  <div class="goods-item" @click="toGoodsDetail(props.goodsInfo.id)">
    <el-card :body-style="{ padding: '0px' }" shadow="never">
      <img :src="props.goodsInfo.src" class="image" />
      <div style="padding: 14px">
        <p class="goodsTitle">{{ props.goodsInfo.content }}</p>
        <p class="price" v-if="props.goodsInfo.onsale">
          <span>￥{{ props.goodsInfo.price }}</span>
          <span class="onsale">￥{{ props.goodsInfo.oldPrice }}</span>
        </p>
        <p class="price" v-else>￥{{ props.goodsInfo.price }}</p>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";

const router = useRouter();
type propsType = {
  goodsInfo: {
    id: number;
    src: string;
    content: string;
    price: string;
    oldPrice?: string;
    onsale?: boolean;
  };
};

//当未传递时，给定初始值
// const props = withDefaults(defineProps<propsType>(), {
//   goodsInfo: () => {
//     return {
//       id: 0,
//       src: "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
//       content:
//         "钱钟书的《围城》这本书讲述的是20世纪30年代一群知识分子的故事，以从欧洲留学回国的青年方鸿渐为中心",
//       price: "88.00",
//       oldPrice: "99.00",
//       onsale: false,
//     };
//   },
// });
const props = defineProps<propsType>();
const toGoodsDetail = (id: number) => {
  router.push({ path: "/goodsDetail", query: { id: id } });
};
</script>

<style scoped lang="less">
.goods-item {
  width: 300px;
  transition: all 0.3s;

  &:hover {
    box-shadow: 1px 4px 13px 0px #aaa;
    transform: translateY(-5px);
  }
  img {
    width: 300px;
    height: 300px;
  }
  .goodsTitle {
    font-size: 16px;
    color: #333;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .price {
    color: #f00;
    font-size: 16px;
    margin-top: 10px;
    .onsale {
      margin-left: 10px;
      font-size: 14px;
      text-decoration: line-through;
    }
  }
}
</style>
